import React from 'react'
import "../../common/common.css"
import html2canvas from 'html2canvas'

export default function Html2canvas() {
    const imgeRef = React.createRef();
    function getIcon() {
        console.log("imgeRef", imgeRef.current);
        html2canvas(imgeRef.current, {}).then(canvas => {
            document.body.appendChild(canvas)
            const icon = canvas.toDataURL();
            console.log(icon);
        });
    }
    function changeColor() {
        console.log(imgeRef.current.children);
        imgeRef.current.style.backgroundColor = "#f547a4"
        imgeRef.current.children[0].style.color = "#089BFF"
        imgeRef.current.children[2].style.color = "#E2DFFF"
    }
    return (
        <div>
            <button className='returnButton' style={{ padding: '0px' }}><a href="/">点击返回主菜单</a></button>
            <h1>Html2canvas</h1>
            <div id="capture" ref={imgeRef} style={{ padding: '10px', background: '#f5da55', margin: '100px' }}>
                <p style={{ color: '#3BB704' }}>Hello!这是被捕获的div</p> <br />
                <span style={{ color: '#C30DFF' }}>这是其他标签</span>
            </div>
            <button onClick={getIcon} style={{margin:"20px"}}>点击截图</button>
            <button onClick={changeColor}>修改样式</button>
            <p>
                1.yarn add html2canvas <br />
                2.import html2canvas from 'html2canvas' <br />
                3.调用 <br />
                {`
                    html2canvas(imgeRef.current, { }).then(canvas =&gt; {
                        document.body.appendChild(canvas);
                        const icon = canvas.toDataURL();
                        console.log(icon);}
                    );
                `}
            </p>
        </div>
    )
}
